<script setup lang="ts">
  import { useSettingsStore } from '@renderer/store/modules/settings.store'
  import { ThemeEnum } from '@renderer/enums/SettingEnum'

  const settingsStore = useSettingsStore()
</script>

<template>
  <TooltipProvider>
    <Tooltip>
      <TooltipTrigger as-child>
        <button class="icon-btn" @click="settingsStore.toggleTheme">
          <!-- 亮色主题图标 -->
          <i v-if="settingsStore.theme === ThemeEnum.DARK" class="i-mynaui-moon"></i>
          <!-- 暗色主题图标 -->
          <i v-else-if="settingsStore.theme === ThemeEnum.LIGHT" class="i-mynaui-sun"></i>
          <!-- 系统主题图标 -->
          <i v-else class="i-mynaui-desktop"></i>
        </button>
      </TooltipTrigger>
      <TooltipContent side="bottom" align="center">
        {{ $t(settingsStore.getNowThemeLabel) }}
      </TooltipContent>
    </Tooltip>
  </TooltipProvider>
</template>
